<template>
  <div class="deliverGoods">
    <div class="header">
      <div class="header-one"><i class="iconfont">&#xe671;</i>买家已付款</div>
      <div class="header-two">请等待卖家发货</div>
    </div>
    <div class="site">
      <p><span style="color:#666666">张三&nbsp;&nbsp;180****1849</span></p>
     <p><i class="iconfont1">&#xe619;</i><span style="color: #999999">北京市通州区万达广场写字楼</span></p>
    </div>
    <div class="interval"></div>
    <div v-for="item in list" :key="item.id" class="commodity">
      <img :src="item.image" alt="">
      <div class="commodity1">
        <p><span v-text="item.title" style="font-family:'微软雅黑';font-weight:410;">烟台苹果红富士产地直销批发</span><span class="num">x1</span></p>
        <p><span style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;color:#CCCCCC;">50斤</span></p>
        <p><span v-text="item.price" style="font-family:'微软雅黑 Regular', '微软雅黑';font-weight:400;color:#F04844;">¥99</span></p>
      </div>
    </div>
    <div class="interval"></div>
    <div class="order-information">
      <span>订单信息</span>
    </div>
    <div class="total">
      <span>商品合计：</span>
    </div>
    <div class="interval"></div>
    <div class="serial-number">
      <span>订单编号:</span>
      <span>1197724012522</span>
      <span>复制</span>
    </div>
    <div class="serial-number">
      <span>支付方式:</span>
      <span>在线支付</span>
    </div>
    <div class="serial-number">
      <span>创建时间:</span>
      <span>2017-05-01 16:00：54</span>
    </div>
    <div class="serial-number">
      <span>付款时间:</span>
      <span>2017-05-01 16:00：54</span>
    </div>
    <div class="serial-number">
      <span>联系客服</span>
    </div>
    <div class="box"></div>
    <div class="flooter">
      <span class="flooter5" @click="collect">下一步</span>
      <span class="flooter3">申请退款</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'deliverGoods',
  data() {
    return {
      list: [],
    }
  },
  created() {
    console.log(this.$store.state.cart.order)
    this.list = this.$store.state.cart.order
  },
  methods: {
    collect() {
      this.$router.push('/collect')
    },
  },
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* Project id 3287300 */
  src: url('https://at.alicdn.com/t/font_3287300_bk8bgi5uvf.woff2?t=1648545714301') format('woff2'),
       url('https://at.alicdn.com/t/font_3287300_bk8bgi5uvf.woff?t=1648545714301') format('woff'),
       url('https://at.alicdn.com/t/font_3287300_bk8bgi5uvf.ttf?t=1648545714301') format('truetype');
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:30px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 700;
  }
  .iconfont1{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
html,body{
  height: 100%;
  width: 100%;
}
.box{
  height: 30px;
  width: 100%;
}
.header{
  background-color: #1abc9c;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  color: white;
  padding-top: 25px ;
  padding-left: 20px;
}
.header-one{
  font-size: 17px;
}
.header-two{
  margin-left: 25px;
  margin-top:15px;
  font-size: 13px;
}
.site{
  width: 100%;
  height: 96px;
  padding-left: 25px;
  font-size: 13px;
  box-sizing: border-box;
  border-bottom: #f9f9f9 1px solid;
}
.site>p:nth-child(1){
  margin-left: 15px;
  box-sizing: border-box;
  padding-top: 25px;

}

.interval{
  height: 15px;
  width: 100%;
  background-color: #f9f9f9;
}
.commodity{
  height: 110px;
  width: 100%px;
  display: flex;
  padding-left: 25px;
  box-sizing: border-box;
  border-bottom: #f9f9f9 1px solid;

}
.commodity img{
  width: 80px;
  height: 80px;
  margin-top: 15px;
}
.commodity1{
  margin-top: 15px;
  margin-left: 20px;
  width: 100%;
}
.commodity1>p{
    margin-top: 5px;
}
.num{
  margin-left: 55px;
  color: #1abc9c;
}
.order-information{
  color: #999;
  width: 100%;
  height: 40px;
  padding-left: 25px;
  border-bottom: #f9f9f9 1px solid;
  line-height: 40px;
  box-sizing: border-box;
}
.total{
  width: 100%;
  height: 40px;
  padding-left: 25px;
  border-bottom: #f9f9f9 1px solid;
  line-height: 40px;
  box-sizing: border-box;
}
.serial-number{
  width: 100%;
  height: 40px;
  padding-left: 25px;

  line-height: 40px;
  box-sizing: border-box;
}
.serial-number span:nth-child(2){
  margin-left:20px;
  color: #999;
}
.serial-number span:nth-child(3){
  display: inline-block;
  width: 40px;
  height: 20px;
  border: #999 1px solid;
  text-align: center;
  line-height: 20px;
  margin-left: 130px;
  color: #999;
}
.flooter{
  height: 40px;
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: white;

}

.flooter3{
  display: inline-block;
  width: 65px;
  height: 25px;
  border: 1px solid #999;
  font-size: 15px;
  line-height: 25px;
  text-align: center;
  color: #999;
  margin-left: 15px;
  margin-top: 10px;
}
.flooter5{
  display: inline-block;
  width: 65px;
  height: 25px;
  border: 1px solid #999;
  font-size: 15px;
  line-height: 25px;
  text-align: center;
  color: #999;
  margin-left: 200px;
  margin-top: 10px;
}
</style>
